{{#if template}}
<template>
	<cl-crud ref="crud" @load="onLoad">
		<el-row type="flex">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table v-bind="table">
				<cl-empty slot="empty" />
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

	</cl-crud>
</template>
{{/if}}
{{#if script}}
<script>
	export default {
		name: '{{ properCase name }}',
		data() {
			return {
				// 表格配置
				table: {
					"context-menu": ["refresh"],
					columns: [
						{
							type: "index",
							label: "#",
							width: 50,
							fixed: true
						}
					]
				},
				search: {
					keyword: ""
				}
			}
		},
		created() { },
		mounted() { },
		methods: {
			onLoad({ ctx, app }) {
				ctx.service(this.$service.demo).done();
				app.refresh(this.search);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			}
		}
	}
</script>
{{/if}}
{{#if style}}
<style lang="scss" scoped>

</style>
{{/if}}
